<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能薪资计算器</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- Electron CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com https://fonts.gstatic.com data:;">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="title">💰 智能薪资计算器</h1>
            <p class="subtitle">实时追踪您的收入进度</p>
        </header>

        <div class="main-content">
            <!-- 薪资设置步骤 -->
            <div class="step-container" id="setupStep">
                <div class="card setup-card">
                    <div class="step-indicator">
                        <div class="step-number">1</div>
                        <div class="step-info">
                            <h2 class="section-title">📝 薪资设置</h2>
                            <p class="step-description">请填写您的工作信息以开始计算收入</p>
                        </div>
                    </div>
                    
                    <form id="salaryForm" class="form">
                        <div class="form-group">
                            <label for="monthlySalary">月薪 (￥)</label>
                            <input type="number" id="monthlySalary" placeholder="请输入您的月薪" min="1000" step="100" required>
                        </div>

                        <div class="form-group">
                            <label class="toggle-container">
                                <span class="toggle-label">是否为试用期</span>
                                <span class="toggle-description">试用期薪资按8折计算</span>
                                <div class="toggle-wrapper">
                                    <input type="checkbox" id="isProbationPeriod" class="toggle-input">
                                    <span class="toggle-slider"></span>
                                </div>
                            </label>
                        </div>

                        <div class="form-group">
                            <label for="workDaysPerWeek">每周工作天数</label>
                            <select id="workDaysPerWeek" required>
                                <option value="">请选择工作天数</option>
                                <option value="4">4天 (四天工作制)</option>
                                <option value="4.5">4.5天 (半天周五)</option>
                                <option value="5" selected>5天 (传统工作制)</option>
                                <option value="5.5">5.5天 (半天周六)</option>
                                <option value="6">6天 (六天工作制)</option>
                                <option value="7">7天 (全年无休)</option>
                            </select>
                        </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label for="startTime">上班时间</label>
                                <input type="time" id="startTime" value="09:00" required>
                            </div>
                            <div class="form-group">
                                <label for="endTime">下班时间</label>
                                <input type="time" id="endTime" value="18:00" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="lunchBreak">中午休息时长 (小时)</label>
                            <input type="number" id="lunchBreak" value="1" min="0" max="8" step="0.5" required>
                            <div class="input-hint">休息时长仅用于计算实际工作时长，不影响下班时间</div>
                        </div>

                        <button type="submit" class="btn-primary">
                            <span>开始计算</span>
                            ⚡
                        </button>
                    </form>
                </div>
            </div>

            <!-- 实时收入步骤 -->
            <div class="step-container" id="earningsStep" style="display: none;">
                <div class="step-header">
                    <div class="step-indicator">
                        <div class="step-number">2</div>
                        <div class="step-info">
                            <h2 class="section-title">💸 实时收入追踪</h2>
                            <p class="step-description">正在实时计算您的工作收入</p>
                        </div>
                    </div>
                    <button id="backToSetup" class="btn-back">⬅ 返回设置</button>
                </div>
                <div class="card earnings-card" id="earningsCard">
                    <div class="current-earnings">
                        <div class="earnings-amount">
                            ￥<span id="currentEarnings">0.00</span>
                        </div>
                        <div class="earnings-label">今日已赚取</div>
                    </div>

                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="progressFill"></div>
                        </div>
                        <div class="progress-text">
                            <span id="progressPercentage">0%</span>
                            <span id="timeRemaining">剩余时间: --:--</span>
                        </div>
                    </div>

                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-label">每秒收入</div>
                            <div class="stat-value">￥<span id="perSecondEarnings">0.00</span></div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">每分钟收入</div>
                            <div class="stat-value">￥<span id="perMinuteEarnings">0.00</span></div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">每小时收入</div>
                            <div class="stat-value">￥<span id="perHourEarnings">0.00</span></div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">今日目标</div>
                            <div class="stat-value">￥<span id="dailyTarget">0.00</span></div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">工作日总数</div>
                            <div class="stat-value"><span id="workDaysCount">0</span>天</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">工作时长</div>
                            <div class="stat-value"><span id="workDuration">0</span>小时</div>
                        </div>
                        <div class="stat-item monthly-total">
                            <div class="stat-label">今月已赚总收入</div>
                            <div class="stat-value">￥<span id="monthlyTotalEarnings">0.00</span></div>
                        </div>
                        <div class="stat-item" id="probationStatus" style="display: none;">
                            <div class="stat-label">薪资状态</div>
                            <div class="stat-value probation-indicator">
                                <span class="probation-badge">试用期</span>
                                <span class="probation-discount">8折薪资</span>
                            </div>
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button id="startTrackingBtn" class="btn-primary" style="display: none;">▶ 开始追踪</button>
                        <button id="pauseBtn" class="btn-secondary">⏸ 暂停</button>
                        <button id="miniModeBtn" class="btn-secondary">📱 小窗</button>
                        <button id="resetBtn" class="btn-secondary">🔄 重置</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 结算页面 -->
        <div class="step-container" id="settlementStep" style="display: none;">
            <div class="step-header">
                <div class="step-indicator">
                    <div class="step-number">3</div>
                    <div class="step-info">
                        <h2 class="section-title">🎉 今日工作结算</h2>
                        <p class="step-description">恭喜您完成今日工作！</p>
                    </div>
                </div>
                <button id="backToEarnings" class="btn-back">⬅ 返回追踪</button>
            </div>
            <div class="card settlement-card" id="settlementCard">
                <div class="settlement-header">
                    <div class="settlement-icon">🎊</div>
                    <h3 class="settlement-title">今日工作完成！</h3>
                    <p class="settlement-subtitle">您已经成功完成了今天的工作目标，距离您的百万富翁之梦又近了一步！</p>
                </div>

                <div class="settlement-summary">
                    <div class="summary-item">
                        <div class="summary-label">今日总收入</div>
                        <div class="summary-value">￥<span id="settlementDailyEarnings">0.00</span></div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">工作时长</div>
                        <div class="summary-value"><span id="settlementWorkDuration">0</span>小时</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-label">工作进度</div>
                        <div class="summary-value"><span id="settlementProgress">100%</span></div>
                    </div>
                </div>

                <div class="settlement-details">
                    <h4 class="details-title">详细统计</h4>
                    <div class="details-grid">
                        <div class="detail-item">
                            <div class="detail-label">每秒收入</div>
                            <div class="detail-value">￥<span id="settlementPerSecond">0.0000</span></div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">每分钟收入</div>
                            <div class="detail-value">￥<span id="settlementPerMinute">0.00</span></div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">每小时收入</div>
                            <div class="detail-value">￥<span id="settlementPerHour">0.00</span></div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">本月累计</div>
                            <div class="detail-value">￥<span id="settlementMonthlyTotal">0.00</span></div>
                        </div>
                    </div>
                </div>

                <div class="settlement-actions">
                    <button id="newDayBtn" class="btn-primary">🌅 开始新的一天</button>
                    <button id="shareResultBtn" class="btn-secondary">📤 分享成果</button>
                </div>
            </div>
        </div>

        <!-- 小窗模式 -->
        <div class="mini-window" id="miniWindow" style="display: none;">
            <div class="mini-header">
                <h3 class="mini-title">💰 实时收入</h3>
                <div class="mini-controls">
                    <button id="expandBtn" class="mini-btn" title="展开">⛶</button>
                    <button id="closeMiniBtn" class="mini-btn" title="关闭">✕</button>
                </div>
            </div>
            <div class="mini-content">
                <div class="mini-earnings">
                    <div class="mini-amount">￥<span id="miniCurrentEarnings">0.00</span></div>
                    <div class="mini-label">今日已赚取</div>
                </div>
                <div class="mini-progress">
                    <div class="mini-progress-bar">
                        <div class="mini-progress-fill" id="miniProgressFill"></div>
                    </div>
                    <div class="mini-progress-text">
                        <span id="miniProgressPercentage">0%</span>
                        <span id="miniTimeRemaining">--:--</span>
                    </div>
                </div>
                <div class="mini-actions">
                    <button id="miniPauseBtn" class="mini-action-btn">⏸</button>
                    <button id="miniStartBtn" class="mini-action-btn" style="display: none;">▶</button>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>© 2025 智能薪资计算器 | 让每一秒都有价值</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>